<script setup>
/**
 * @name 视频组场景特效
 */
import baseModel from "@/components/baseModel/baseModel.vue";
// base弹窗
const dialog = ref(null);

import { ref, reactive, onMounted, computed, nextTick } from "vue";

const emit = defineEmits(["updateEffect_config:effect_config"]);

import request from "@/common/utils/request";

import {getEffect_config} from '@/views/shotstack/MixedCutPlatforms/utools/template.js'


const state = reactive({
    activeKey: '',
    // 特效列表
    list: [],
    // effect_config
    effect_config:getEffect_config()
})

// 数据回显
const resetData = () => {
            // 数据回显
            if (state.effect_config.effects.length) {            
                state.list.flatMap(ele => ele.materials).forEach(ele => {
                    state.effect_config.effects.includes(ele.scene_type)
                        ? ele.checked = true
                        : ele.checked = false
                // state.effect_config.effects.includes(ele.scene_type) && (ele.checked = true)
            })
        }
}

// 获取特效列表
const getVfxList = async () => {
    const res = await request.get("work_ai",
        "/user/shotstack/material/vfx/list"
      );

    console.log(res, '特效列表');
    state.list = res?.result || []
    if (state.list.length) {        
        const item = state.list?.[0]
        item && (state.activeKey = `${item?.id}_${item?.scene_type}`)
        resetData()
    }
}

const submit = () => {
    emit('updateEffect_config', state.effect_config)
    dialog.value.closeModal();
}

const addDataFn = (params = {}) => {
    const {} = params
    state.effect_config.effects = state.list.flatMap(ele => ele.materials).reduce((sum, item) => {
        !!item.checked && sum.push(item.scene_type)
       return sum
    },[])
    console.log(state.effect_config.effects,'更新之后的数据');
}

// 勾选
const select = (ele) => {
    if(state.effect_config.isRandom) return
    ele.checked = !ele.checked
    addDataFn()
}

const isRandomChange = (e) => {
    console.log(e,'改变 随机');
    if (e) {
        // 将所有的scene_type 添加到  effects中
        state.effect_config.effects = state.list.flatMap(ele => ele.materials).map(ele => {
            // ele.checked = false
            return ele.scene_type
        })
    } else {
        // state.effect_config.effects = state.list.flatMap(ele => ele.materials).forEach(ele => {
        //     ele.checked = false
        // })
        state.effect_config.effects = []

        state.list.flatMap(ele => ele.materials).forEach(ele => {
            ele.checked && state.effect_config.effects.push(ele.scene_type)
        })
    }
    console.log(state.effect_config.effects,'随机和不随机改变');
}

// 清空已选择的项
const clearData = () => {

    if (!state.effect_config.isRandom) {
        state.effect_config.effects = []
    }

    state.list.flatMap(ele => ele.materials).forEach(ele => {
        ele.checked = false
    })
    console.log(state.effect_config.effects,'清空已选择的项');
}

const showModal = (item) => {
    state.effect_config = JSON.parse(JSON.stringify(item))
    getVfxList()
    dialog.value.showModal();
    console.log(state.effect_config,'zhesddfsdf ');
    
};
const closeModal = () => {
    dialog.value.closeModal();
}

defineExpose({
    showModal,
    closeModal,
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'1050px'" :maskClosable="false" :centered="true" :closable="true">
            <template #title>
                    <span class="title">镜头组场景特效</span>
            </template>
            <template #content>
                <div class="content">
                    <div class="is_top_title">
                        <div class="title_left">
                            <div class="title_text_box">
                                <span class="title_text_style">开启随机</span>
                                <a-switch  v-model:checked="state.effect_config.isRandom" @change="isRandomChange"/>
                            </div>

                            <span class="dec_text">
                                开启后本镜头组将随机选择下面特效，无需手动选择。
                            </span>
                        </div>

                        <div class="title_right">
                            <a-button @click="clearData" size="small">清空选择</a-button>
                        </div>
                    </div>

                    <div class="line_box"></div>

                    <div class="self_selects">
                        <div class="title_left">
                            <div class="title_text_box">
                                <span class="title_text_style">手动选择</span>
                            </div>
                            <span class="dec_text">
                                将从手动选择的特效里随机
                            </span>
                        </div>

                        <div class="effects_box">
                            <h3 class="title_text_style">基础</h3>

                            <a-tabs v-model:activeKey="state.activeKey">
                                <a-tab-pane v-for="item in state.list" :key="`${item?.id}_${item?.scene_type}`" :tab="item.name">
                                    <div class="list_box">
                                        <div class="list_item" v-for="ele in item.materials" :key="ele.id" @click.stop="select(ele)">
                                            <a-checkbox v-if="!state.effect_config.isRandom" class="is_checkbox" v-model:checked="ele.checked" />
                                              <img :src="ele.material_url" alt="">
                                              <span>
                                                {{ ele.material_name }}
                                              </span>
                                        </div>
                                    </div>
                                </a-tab-pane>
                            </a-tabs>
                        </div>

                    </div>

                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button @click="closeModal" type="">取消</a-button>
                    <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </template>
        </baseModel>
    </div>
</template>

<style lang="less" scoped>

.content{

    .title{
        font-size: 14px;
    }

    .title_text_style{

        font-size: 14px;
        font-weight: 600;

    }

    // 公用样式单独提取出来
    .title_left{
            display: flex;
            flex-direction: column;

            .title_text_box{
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 3px;
            }
            .dec_text{
                font-size: 14px;
                color: #999;
            }
        }

    .is_top_title{
        display: flex;
        justify-content: space-between;

    }

    .line_box{
        height: 1px;
        background-color: #eee;
        margin: 10px 0;
    }

    // 自选特效
    .self_selects{

        .effects_box{
            margin-top: 10px;

            .list_box{
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                height: 400px;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    width: 8px; /* 滚动条的宽度 */
                    height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
                }
                &::-webkit-scrollbar-thumb {
                    background: #cecece; /* 滑块的背景颜色 */
                    border-radius: 10px; /* 滑块的圆角 */
                }
                .list_item{
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    position: relative;
                    cursor: pointer;
                    img{
                        object-fit: cover;
                        height: 135px;
                        width: 240px;
                    }

                    .is_checkbox{
                        position: absolute;
                        right: 5px;
                        top: 5px;
                    }
                }
            }
        }

    }
}

</style>